@import 'reset';
@import 'class';
@import 'icon';


html,
body {
    h: 100%;
}

body {
    bg: #f2f5f8;
    c: #363a40;
    fz: 14px;
    min-width: 1300px;
}

.main {
    p: 86px 30px 30px;
}

.main-side {
    h: 100%;
    p: 56px 0 0;
    @extend sizing;
}
















/*公共title*/

.ptitle {
    mb: 18px;
    bdl: 2px solid #fac905;
    pl: 10px;
    fz: 16px;
    fw: bold;
    ofl: hidden;
    &.ptitle1{
        ofl: visible;
        h: 16px;
        lh:10px;
    }
    .num {
        fz: 24px;
        c: #f2444f;
        m: 0 6px;
    }
    a.link {
        c: #6aa1e6;
        fz: 14px;
        fw: normal;
        fl: right;
    }
    .has-account {
        fl: right;
        c: #a0a5ad;
        fz: 14px;
        fw: normal;
        a {
            color: $blue;
            ml: 10px;
        }
    }
}

.line {
    h: 3px;
    bg: url(../images/line.png) repeat-x;
}















/*头部*/

.head {
    h: 56px;
    lh: 56px;
    bg: #1461c7;
    p: 0 35px 0 30px;
    pos: absolute;
    t: 0;
    w: 100%;
    min-width: 1300px;
    @extend sizing;
    z-index: 22;
}

.logo {
    fl: left;
    mr: 60px;
    a {
        fl: left;
        mt: 10px;
    }
    .logo-text {
        mt: 16px;
        ml: 32px;
        fl: left;
        h: 24px;
        lh: 24px;
        pl: 20px;
        c: #73a6e5;
        fz: 20px;
        bdl: 1px solid #2878e0;
    }
}

.tab {
    fl: left;
    li {
        fl: left;
        p: 0 24px;

        a {
            d: block;
            c: #73a6e5;
            fz: 16px;
        }
        &.active {
            bg: #1257b3;
            a {
                c: #fff;
            }
        }
    }
}

.search {
    fl: left;
    ml: 60px;
    pos: relative;
    input {

        size: 180px 30px;
        lh: 30px;
        border-radius: 30px;
        bd: 0;
        bg: #4f89d5;
        c: #b8d2f2;
        p: 0 10px 0 13px;
        transition: width .5s;
        @extend sizing;
        &.active {
            w: 220px;
        }
    }
    .icon-search {
        cursor: pointer;
        pos: absolute;
        r: 16px;
        t: 19px;
    }
}

.account {
    fl: right;
    pos: relative;
    cursor: pointer;
    .title {
        p: 0 0 0 6px;
        c: #73a6e5;
        ofl: hidden;
        span {
            fl: left;
            m: 0 8px;
        }
        .icon-account {
            fl: left;
            mt: 20px;
        }
        .icon-title-arrow {
            mt: 26px;
            fl: left;
            triangle: pointing-down;
            width: 9px;
            height: 6px;
            background-color: #73a6e5;
        }
    }
    .list-wrap {
        pos: absolute;
        t: 56px;
        r: -23px;
        min-width: 120px;
        box-shadow: 4px 4px 5px #e8e8e8, -5px 2px 5px #e8e8e8;

        .list-wrap-inner {
            pos: relative;
            .icon-list-arrow {
                d: inline-block;
                triangle: pointing-up;
                width: 16px;
                height: 8px;
                background-color: #fff;
                pos: absolute;
                t: -8px;
                r: 20px;
            }
        }
        ul {
            bg: #fff;
            li {
                lh: 36px;
                m: 0 2px;
                ta: center;
                a {
                    d: block;
                    color: #363a40;
                }
                &:hover {
                    bg: #f5f6f7;
                    a {
                        c: #6aa1e6;
                    }
                }
            }
        }
    }
}














/*底部*/

.bottom {
    w: 100%;
    h: 60px;
    bdt: 1px solid #d8dde3;
    box-shadow: 0 -2px 5px #e9e9e9;
    pos: fixed;
    b: 0;
    ta: center;
    bg: #fafbfc;
    ul {
        d: inline-block;
    }
    li {
        fl: left;
        bd: 1px solid #d8dde3;
        bdw: 0 1px;
        p: 0 30px;
        h: 60px;
        lh: 60px;
        bg: #fff;
        ml: -1px;
        cursor: pointer;
        .icon {
            fs: normal;
            c: #a0a5ad;
            lh: 36px;
            fz: 18px;
        }
        a {
            display: block;
        }
        &.active {
            bg: #fac905;
            bdc: #fac905;
            pos: relative;
            z-index: 22;
            .icon {
                bgp: -102px -41px;
                c: #fff;
            }
        }
    }
}














/*侧边栏*/

.side-left {
    w: 161px;
    bg: #dfe5eb;
    pt: 66px;
    /*fl:left;*/
    h: 100%;
    t: 0;
    pos: absolute;
    l: 0;
    min-height: 766px;
    @extend sizing;
    li {
        bd: 1px solid #d8dde3;

        h: 50px;
        lh: 50px;
        fz: 16px;
        mt: -1px;
        a {
            c: #363a40;
            d: block;
            i {

                m: 0 20px;
            }
            .icon-user-password {
                mr: 23px;
            }
            .icon-wait-handle,
            .icon-file-all,
            .icon-has-ok {
                va: -6px;
            }
        }
        &.active {
            bg: #fff;
            bdr: 0;
            a {
                color: #6aa1e6;
                fw: bold;
            }
            .icon-file-all {
                bgp: -70px -135px;
            }
            .icon-wait-handle {
                bgp: -70px -109px;
            }
            .icon-has-ok {
                bgp: -70px -161px;
            }
            .icon-user-infor {
                bgp: -70px -193px;
            }
            .icon-user-sign {
                bgp: -44px -170px;
            }
            .icon-user-password {
                bgp: -135px -193px;
            }
        }
    }
}














/*右侧区域*/

.side-right {
    p: 20px 30px 20px 191px;
}














/*返回顶部*/

.totop {
    size: 48px 48px;
    bg: #dfe2e5;
    ta: center;
    lh: 48px;
    cursor: pointer;
    pos: fixed;
    /*ml: 1220px;*/
    r:0.3%;
    t: 50%;
    mt: -24px;
    border-radius: $radius;
    &:hover{
        bg:#c8cbcf;
    }
}














/*table*/

.table {
    table {
        fz: 14px;
        thead tr {
            h: 36px;
            bg: #f5f6f7;
            th {
                c: #a0a5ad;
                fw: normal;
                ta: left;
                pl: 12px;
            }
        }
        tbody {
            tr {
                bdb: 1px solid #e4e6eb;
                &:hover{
                    bg:#f5f6f7;
                }
                h: 48px;
                td {
                    pl: 12px;
                    .asign {
                        size: 72px 30px;
                        bg: #6aa1e6;
                        border-radius: 3px;
                        cursor: pointer;
                        bd: 0;
                        c: #fff;
                        d: block;

                        ta: center;
                        lh: 30px;
                        &:hover {
                            opacity: .8;
                            filter: alpha(opacity=80);
                        }
                    }
                }
            }
        }
    }
}














/*登录注册*/

.border-input {
    bd: 1px solid #c9ced4;
    border-radius: $radius;
    &.active {
        bdc: #6aa1e6;
    }
}

.must {
    c: #f2444f;
}

.register-wrap,
.password-wrap,
.identify-input-wrap {
    /*ofl: hidden;*/
    clear: fix;
}

.password-section,
.register-section,
.identify-section,
.basic-section {
    h: 60px;
    clear: fix;
}


.password-section-input,
.register-section-input,
.identify-section-input {
    .input-title {
        lh: 38px;
    }
}

.password-input-wrap {
    m: 40px auto 0;
    /*w: 430px;*/
}

.register-input-wrap,
.password-input-wrap {
    m: 40px auto 0;
    /*w: 360px;*/
    /*ta:center;*/
    float: left;
    /* 自适应内容宽度 */
    position: relative;
    left: 50%;

}

.register-input-wrap-inner,
.password-input-wrap-inner {
    position: relative;
    left: -50%;
}



.password-section-newpass {
    mt: -10px;
}

.password-section-yzm,
.register-section-yzm,.reseting-section-yzm {
    .input-text {

        input {
            w: 110px;
            fl: left;
        }
    }
    a {
        fl: left;
        ml: 10px;
        size: 120px 38px;
        lh: 38px;
    }
}

.password-section-sure,
.register-section-sure,
.reseting-section-sure {
    mb: 40px;
    a {
        d: block;
        size: 240px 38px;
        lh: 38px;
    }
    .note {
        fl: left;
        c: #a0a5ad;
        ml: 20px;
        lh: 38px;
    }
}
.reseting-section-sure{
    mb:30px;
}

.input-title,
.input-text {
    fl: left;
    pos: relative;
}

.input-text {
    input.readonly-active {
        bdc: transparent;
    }
    input.active {
        box-shadow: none;
    }
}

.input-text1 {
    lh: 38px;
    pl:10px;
}

.input-title {
    mr: 15px;
    ta: right;
    w: 70px;
    c: $gray;
}

.register-section {
    .input-title {
        w: 100px;
    }
}

.input-text {
    input {
        size: 240px 38px;
        border-radius: $radius;
        bd: 1px solid #c9ced4;
        pl: 10px;
        lh:38px;
        @extend sizing;
    }
}

.protocol-checkbox {
    mt: -2px;
    fl: left;
    cursor: pointer;
    size: 16px 16px;
    bd: 1px solid #c9ced4;
    border-radius: $radius;
    bg: #fff;
    va: -4px;
    mr: 8px;
    .icon-checkbox {
        margin: 4px 0 0 3px;
    }
    &.active {
        bg: #fac905;
        bdc: #fac905;
        .icon-checkbox {
            d: block;
        }
    }
}

.register-section-protocol {
    h: 44px;

    .protocol-text {
        fl: left;

        c: #a0a5ad;

        a {
            c: #6aa1e6;
        }
    }
}

.register-bottom {
    ta: center;
    mb: 38px;
    mt: 8px;
    a {
        c: #363a40;
        mr: 35px;
        &:hover{
            color:$blue;
        }
    }
}

.warn {
    ml: 20px;
    c: #f2444f;
    fl: left;
    lh: 36px;
    i {
        mr: 5px;
    }
}

.identify-section-dropdown,
.basic-section-dropdown {
    input {
        cursor: pointer;
    }
    .dropdown-list {
        pos: absolute;
        bd: 1px solid #c9ced4;
        w: 100%;
        bg: #fff;
        z-index: 22;
        border-radius: $radius;
        max-height: 246px;
        ofl: auto;
        li {
            h: 30px;
            lh: 30px;
            pl: 10px;
            cursor: pointer;
            white-space: nowrap;
            overflow: hidden;
            ;
            text-overflow: ellipsis;
            &:hover {
                color: $blue;
                bg: #f5f6f7;
            }
        }
    }
}

.icon-dropdown-arrow {
    display: inline-block;
    triangle: pointing-down;
    width: 9px;
    height: 6px;
    background-color: #aeb3b8;
    pos: absolute;
    r: 10px;
    top: 16px;
}








/*签名管理*/

.sign-wrap {
    .sign-uploadname {
        bd: 1px solid #ebeef2;
        size: 238px 238px;
        ta: center;
        lh: 238px;
        margin: 60px auto 30px;
        p: 10px;
        box-sizing: border-box;
        float: none;
        .sign-uploadname-inner {
            bg: #fafbfc;
            size: 100% 100%;
            img {
                va: middle;
                max-width: 218px;
                max-height: 218px;
            }
            .upload-top-default{
                lh:194px;
            }
            .upload-top-hover{
              
                 size: 100% 100%;
                 l:0;
                 t:0;
                 .hover-file .lay-input{
                    top:81px;
                    span{
                        lh:38px;
                    }
                 }
            }
        }
    }
    .sign-uploadbutton {
        size: 240px 38px;
        lh: 38px;
        ta: center;
        pos: relative;
        m: 0 auto 30px;
        input {
            opacity: 0;
            filter: alpha(opacity=0);
            size: 100% 100%;
            pos: absolute;
            t: 0;
            l: 0;
            cursor: pointer;
            fz: 0;
        }
    }
}







/*信息管理*/

.infor-wrap-bottom {
    mt: 30px;
    .upload {
        mr: 1.9%;
    }
}

.infor-basic {
    p: 40px 0 20px 0;

    clear: fix;
    .infor-basic-left {
        fl: left;
    }

    .infor-basic-right {
        fl: right;
        margin-right: 6.6%;
    }

    .basic-section {
        .input-title {
            width: 220px;
            lh: 38px;
        }
    }
    .infor-basic-right {
        .basic-section {
            .input-title {}
        }
    }
    .basic-section-yzm .input-text {
        input {
            fl: left;
            w: 110px;
        }
        .bt-yzm {
            fl: left;
            size: 120px 38px;
            lh: 38px;
            ml: 10px;
        }
    }
}




/*上传*/

.upload-wrap {
    ofl: hidden;
}

.upload {
    fl: left;
    ta: center;
    m: 0 30px 25px 0;

    .upload-top {
        size: 240px 160px;
        bd: 1px solid #ebeef2;
        p: 10px;
        box-sizing: border-box;
        pos: relative;
        cursor: pointer;
        &:hover {
            .upload-top-hover {
                display: block;
            }
        }
        .upload-top-default {
            bg: #fafbfc;
            h: 100%;
            lh: 138px;
            img {
                va: middle;
            }
        }
        .upload-top-hover {
            size: 218px 138px;
            pos: absolute;
            l: 10px;
            t: 10px;
            d: none;
            .hover-file {
                pos: relative;
                h: 100%;
                .lay {
                    pos: absolute;
                    l: 0;
                    t: 0;
                    size: 100% 100%;
                    bg: #000;
                    opacity: .5;
                    filter: alpha(opacity=50);
                }
                .lay-input {
                    size: 140px 38px;
                    bg: #fff;
                    pos: relative;
                    cursor: pointer;
                    l: 40px;
                    t: 50px;
                    input.fileinput {
                        opacity: 0;
                        filter: alpha(opacity=0);
                        size: 100% 100%;
                        pos: absolute;
                        l: 0;
                        t: 0;
                        font-size: 0;
                        cursor: pointer;
                    }
                    span {
                        pos: absolute;
                        size: 100% 100%;
                        l: 0;
                        t: 0;

                        /*lh:140px;*/
                        .icon-upload {
                            mt: 11px;
                            mr: 3px;
                        }
                    }
                }
            }
        }
    }
    .upload-text {
        lh: 40px;
    }
}
/*layer*/

.layer-title {
    p: 20px 20px 0 30px;
    fz: 18px;
    .icon-close {
        fl: right;
        mt: -5px;
    }
}
.layui-layer-dialog.layer-th .layui-layer-content{
    bg:#000;
    opacity: .75;
    filter: alpha(opacity=75);
    color:#fff;
    size:240px 90px;
    fz:16px;
    p:0;
    lh:90px;
    ta:center;
}